import {
  Group,
  List,
  Panel,
  layoutConfig,
  jsx,
  ListItem,
  Slider,
  SlideItem,
  Image,
  Color,
  createRef,
} from "doric";
const imageUrls = [
  "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
  "http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
  "http://hbimg.b0.upaiyun.com/ca29ea125b7f2d580f573e48eb594b1ef509757f34a08-m0hK45_fw658",
  "http://b.hiphotos.baidu.com/image/pic/item/908fa0ec08fa513db777cf78376d55fbb3fbd9b3.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg",
  "http://f.hiphotos.baidu.com/image/pic/item/b151f8198618367aa7f3cc7424738bd4b31ce525.jpg",
  "http://b.hiphotos.baidu.com/image/pic/item/0eb30f2442a7d9337119f7dba74bd11372f001e0.jpg",
  "http://a.hiphotos.baidu.com/image/h%3D300/sign=b38f3fc35b0fd9f9bf175369152cd42b/9a504fc2d5628535bdaac29e9aef76c6a6ef63c2.jpg",
  "http://h.hiphotos.baidu.com/image/pic/item/810a19d8bc3eb1354c94a704ac1ea8d3fd1f4439.jpg",
];

@Entry
export class SliderInListDemo extends Panel {
  build(root: Group) {
    <List
      parent={root}
      layoutConfig={layoutConfig().most()}
      itemCount={50}
      renderItem={() => {
        const sliderRef = createRef<Slider>();
        return (
          <ListItem layoutConfig={layoutConfig().mostWidth().fitHeight()}>
            <Slider
              ref={sliderRef}
              layoutConfig={layoutConfig()
                .mostWidth()
                .fitHeight()
                .configMinHeight(1)}
              itemCount={imageUrls.length}
              onPageSlided={(idx) => {
                sliderRef.current.slidePosition = idx;
              }}
              renderPage={(idx) =>
                (
                  <SlideItem
                    layoutConfig={layoutConfig().mostWidth().fitHeight()}
                  >
                    <Image
                      layoutConfig={layoutConfig().mostWidth().justHeight()}
                      height={100}
                      imageUrl={imageUrls[idx]}
                    />
                  </SlideItem>
                ) as SlideItem
              }
            />
          </ListItem>
        ) as ListItem;
      }}
    />;
  }
}
